<template>
    <div>
       <div>姓名：{{ student.name }}</div>
       <div>年龄：{{ student.age }} <button @click="student.age++">+</button></div>
       <div>成绩: <input type="text" v-model.lazy="student.score"> </div>
    </div>
  </template>
  <!-- 
    vue3监听reactive对象中的某个属性
    watch(()=>reactive对象.属性,(newval,oldaval)=>{},配置对象)
   -->
  <script lang='ts' setup>
  import {reactive,watch} from 'vue'
  interface StudentType{
    name:string
    age:number
    score:number
  }
 
  const student=reactive<StudentType>({
    name:'张三',
    age:20,
    score:60
  })
  watch(()=>student.score,(newval,oldval)=>{
    console.log('newval',newval);
    console.log('oldval',oldval);
  })
 
  </script>
  
  <style lang='scss' scoped>
  </style>